An XML-based Visualization System for Dynamic Modeling of a Web-Based Course Storyboard

Graphs are widely and effectively used abstractions for organizing and visualizing information. In this paper we present a graph data structure for representing trees and a drawing framework for positioning the nodes such that the result is a planar radial layout. Radial drawings make good use of the screen space. An XML-based file format for the storing of graph data is presented. The design of the file format achieves data abstraction amongst its layers separating the data and the application. We use an object-oriented algorithmic paradigm. Classes with low cohesion that emphasize scalability and efficiency are produced. A prototype application is presented to test and exhibit the design. The framework and data structures are used to create a radial drawing application for a web-based course storyboard. The radial drawing is a graphical representation of the structure of the web-based course that can be used in the design of the course as well as used as the actual site map. In the prototype, the node structure is not the traditional point used by most graph-drawing applications but rather a complex structure with its own internal structure. A novel specialized design layout for these node structures in which the readability of text-based labels is maximized is offered. This adds to the data abstraction of the design, facilitating the reuse of layout information and improving the overall efficiency. The algorithms are linear with O (n) complexity. Through navigation of the site and interaction with the drawing, the user can alter the focus of the graph as required. This recentering of the graph incorporates animation features for dynamic graph drawing.